/**
{
"style":{
"navigationBarTitleText":"我的团队",
"navigationStyle": "default"
}
}
*/

<template>
	<view class="team hh100">
		<xi-list ref="$list" class="bg#f5f5f5" :query="on.query" :pageSize="15">

			<template #top>
				<view class="pageTop display_flex">
					<view class="flex1 it flex-all-c flex-wrap">
						<view class="ww100">
							<view class="num ww100">
								{{topData.o_num}}
							</view>
							<view class="ww100 text mt16">
								今日验车数量
							</view>
						</view>
					</view>

					<view class="flex1 it flex-all-c flex-wrap">
						<view class="ww100">
							<view class="num ww100">
								{{topData.b_num}}
							</view>
							<view class="ww100 text mt16">
								今日保险数量
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- @click="editAddress(item)" -->
			<template #default="{ data }">
				<view class="list">
					<view class="item flex-tbc" v-for="item in data" :key="item.id">
						<view class="image flex-shrink">
							<image class="ww100 hh100" :src="item.avatar" mode="aspectFill"></image>
						</view>

						<view class="info pl14 pt10 flex1">
							<view class="t flex-tbc">
								<view class="name text-ellipsis-1">
									{{item.nickname}}
								</view>

								<view class="label ml-10 flex-shrink">
									验车 {{item.o_num}}
								</view>

								<view class="label ml-10 flex-shrink">
									保险 {{item.b_num}}
								</view>

								<view class="reamk flex-shrink" @click="onShowRM(item)">
									备注
								</view>
							</view>

							<view class="name-reamk" v-if="item.remark">
								备注: {{item.remark}}
							</view>

							<view class="p pt10">
								{{getPhone(item.mobile)}}
							</view>
						</view>

						<!-- <view class="row ml-a w11 h19">
							<image class="ww100 hh100" src="__ROOT__/common/images/row-r.png" mode=""></image>
						</view> -->
					</view>
				</view>
			</template>
		</xi-list>

		<u-popup :show="show" mode="center" @close="onClose" bgColor="transparent">
			<view class="cont bg-fff">
				<view class="cont-1">
					<view class="title">备注</view>
					<view class="input flex-tbc">
						<input type="text" v-model="formData.remark" placeholder="请输入" />
					</view>
				</view>

				<view class="btns display_flex">
					<view class="btn btn-1 flex_1" @click="onClose">取消</view>
					<view class="btn btn-2 flex_1" @click="onSureRemake">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const topData = ref({
		b_num: 0,
		o_num: 0,
	})

	let on = {
		async query(req) {
			let res = await $post("/user/my_team", {
				...req
			})

			topData.value.b_num = res.b_num
			topData.value.o_num = res.o_num

			let obj = {
				data: res.list,
			}
			return obj
		}
	}

	const getPhone = (v) => {
		// 手机号中间4位变成*号
		return v.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	}


	const show = ref(false)
	const formData = ref({
		id: '',
		remark: ''
	})

	const onClose = () => {
		show.value = false
	}

	const onShowRM = (item) => {
		show.value = true
		formData.value.id = item.id
		formData.value.remark = item.remark
	}

	const $list = ref(null)

	const onSureRemake = async () => {
		const res = await $post('/stores/edit_user_remark', formData.value)
		if (!res) {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			show.value = false
			$list.value.reload()
		}
	}



	Vue.onShow(() => {
		initPage()
	})
	Vue.onLoad(() => {})
</script>
<style scoped lang='scss'>
	.pageTop {
		width: 100%;
		height: 192rpx;
		background: #348B8A;

		.num {
			font-family: OPPOSans, OPPOSans;
			font-weight: bold;
			font-size: 52rpx;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
		}

		.text {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.list {
		background-color: #FFFFFF;
	}

	.item {
		padding: 28rpx 24rpx 36rpx;
		border-bottom: 1rpx solid #ECEEF0;

		&:last-child {
			border-bottom: 0;
		}

		.image {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
		}

		.name {
			max-width: 265rpx;
		}

		.label {
			padding: 4rpx 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #348B8A;
			line-height: 26rpx;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			border: 1rpx solid #348B8A;
		}

		.p {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #938E8A;
			line-height: 40rpx;
		}

		.row {
			image {
				display: block;
			}
		}
	}

	.reamk {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		line-height: 40rpx;
		padding: 0 10px;
		color: #348B8A;
		margin-left: auto;
	}

	.name-reamk {
		font-size: 26rpx;
		color: #333;
		margin-top: 8rpx;

	}

	.cont {
		width: 640rpx;
		// height: 522rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.cont-1 {

			padding: 52rpx 48rpx 0;
		}

		.title {
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #1D2129;
			text-align: center;
		}

		.input {
			margin-top: 40rpx;
			
			input {
				width: 100%;
				height: 74rpx;
				/* border: 1rpx solid #c7c2c2; */
				/* padding: 0 10px; */
			}
		}

		.btns {
			margin-top: 56rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			.btn {
				text-align: center;
				height: 110rpx;
				line-height: 110rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 34rpx;
				margin: 0 !important;

				&.btn-1 {
					color: #4E5969;
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}

				&.btn-2 {
					color: #348B8A;

				}
			}
		}
	}
</style>